<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>机票订购</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/book.css"/>
	</head>
	<body>
		<!--头部-->
		<nav class="navbar navbar-fixed-top navbar-inverse nav-shadow">
			<div class="container-fluid header-box">
				<ul class="nav navbar-nav navbar-right header">
					<li>
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="information.html">旅游咨询</a>
					</li>
					<li class="active">
						<a href="#">机票订购</a>
					</li>
					<li>
						<a href="view.html">风景欣赏</a>
					</li>
					<li>
						<a href="about.html">关于公司</a>
					</li>
				</ul>
			</div>
		</nav>
		
		<!--图片部分-->
		<section class="header-c">
			<div class="container-fluid header-container">
				<div class="header-pic">
					<img src="img/headline.jpg"/>
					<div class="header-title">
						<h1><strong>票务订购</strong></h1>
						<h3>各种飞机票、火车票、汽车票和轮渡票的订购服务</h3>
					</div>
				</div>
			</div>
		</section>
		
		<!--内容-->
		<section class="section-recommend">
			<div class="container">
				<div class="row">
					<!--左边页面-->
					<div class="col-sm-8 content-different">
						<!--左边页面标题-->
						<div class="row">
							<div class="col-xs-12 different-title">
								<h3>机票预订</h3>
								<hr class="different-hr"/>
							</div>
						</div>
						
						<!--左边页面内容-->
						<div class="different-content">
							
							<div class="row">
								<div class="col-xs-12">
									<div class="book-nav">
										<ul>
											<li><span>航班类型</span></li>
											<li id="book-nav1" class="bookit book-nav1 imglight"><span>单程</span></li>
											<li id="book-nav2" class="book-nav1 imglight"><span>往返</span></li>
										</ul>
									</div>
								</div>
							</div>
							
							<!--文本框1-->
							<div class="row">
								<div class="col-sm-12">
									<form id="book-form" class="form-inline book-form">
										
									  	<div class="form-group book-form-group book-grounp1">
									   		<label for="exampleInputName2">出发城市</label>
									   	 	<input type="text" class="form-control" id="exampleInputName2" placeholder="城市名">
									  	</div>
									  	<div class="form-group book-form-group book-grounp1">
										  	<label for="exampleInputEmail2">出发时间</label>
										    <input type="datetime-local" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
									  	</div>
									  	
									  	<button type="button" id="book-btn1" class="btn btn-default btn-hover">订票</button>
									  	
									  	<div class="form-group book-form-group book-grounp2">
									   		<label for="exampleInputName2">返回城市</label>
									   	 	<input type="text" class="form-control" id="exampleInputName2" placeholder="城市名">
									  	</div>
									  	<div class="form-group book-form-group book-grounp2">
										  	<label for="exampleInputEmail2">返回时间</label>
										    <input type="datetime-local" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
									  	</div>
									  	
									  	<button type="button" id="book-btn2" class="btn btn-default btn-hover">订票</button>
									  	
									</form>
								</div>
							</div>
							
						</div>
						
						<!--左边页面标题2-->
						<div class="row">
							<div class="col-xs-12 different-title">
								<h3>最新机票</h3>
								<hr class="different-hr"/>
							</div>
						</div>
						
						<!--左边页面内容2-->
						<div class="different-content">
							<div class="row">
								<div class="col-xs-12">
									<div class="book-nav">
										<ul>
											<li><span>热门城市：</span></li>
											<li onclick="checkit2(this)" class="bookit book-nav2 imglight"><span>全部</span></li>
											<li onclick="checkit2(this)" class="book-nav2 imglight"><span>上海</span></li>
											<li onclick="checkit2(this)" class="book-nav2 imglight"><span>广州</span></li>
											<li onclick="checkit2(this)" class="book-nav2 imglight"><span>深圳</span></li>
											<li onclick="checkit2(this)" class="book-nav2 imglight"><span>重庆</span></li>
											<li onclick="checkit2(this)" class="book-nav2 imglight"><span>成都</span></li>
											<li onclick="checkit2(this)" class="book-nav2 imglight"><span>杭州</span></li>
											<li onclick="checkit2(this)" class="book-nav2 imglight"><span>南京</span></li>
										</ul>
									</div>
								</div>
							</div>
							
							<div class="row">
								<div class="col-xs-12">
									<table class="table table-hover book-table">
										<tr>
											<th>路线</th>
											<th>日期</th>
											<th>价格</th>
											<th>税费</th>
											<th>餐食</th>
											<th>航班</th>
											<th>预订</th>
										</tr>
										<tr class="quanbu chengdu">
											<td>北京-成都</td>
											<td>10-15</td>
											<td><span>￥745</span></td>
											<td>￥50</td>
											<td>有</td>
											<td>春秋航空</td>
											<td><button type="button" class="btn btn-default book-table-btn btn-hover">预订</button></td>
										</tr>
										<tr class="quanbu shanghai">
											<td>北京-上海</td>
											<td>10-15</td>
											<td><span>￥479</span></td>
											<td>￥45</td>
											<td>无</td>
											<td>南方航空</td>
											<td><button type="button" class="btn btn-default book-table-btn btn-hover">预订</button></td>
										</tr>
										<tr class="quanbu shenzheng">
											<td>北京-深圳</td>
											<td>10-15</td>
											<td><span>￥561</span></td>
											<td>￥52</td>
											<td>有</td>
											<td>西部航空</td>
											<td><button type="button" class="btn btn-default book-table-btn btn-hover">预订</button></td>
										</tr>
										<tr class="quanbu hangzhou">
											<td>北京-杭州</td>
											<td>10-15</td>
											<td><span>￥378</span></td>
											<td>￥36</td>
											<td>无</td>
											<td>天津航空</td>
											<td><button type="button" class="btn btn-default book-table-btn btn-hover">预订</button></td>
										</tr>
										<tr class="quanbu guangzhou">
											<td>北京-广州</td>
											<td>10-15</td>
											<td><span>￥612</span></td>
											<td>￥44</td>
											<td>有</td>
											<td>首都航空</td>
											<td><button type="button" class="btn btn-default book-table-btn btn-hover">预订</button></td>
										</tr>
										<tr class="quanbu chongqin">
											<td>北京-重庆</td>
											<td>10-15</td>
											<td><span>￥428</span></td>
											<td>￥62</td>
											<td>有</td>
											<td>东方航空</td>
											<td><button type="button" class="btn btn-default book-table-btn btn-hover">预订</button></td>
										</tr>
										<tr class="quanbu kunming">
											<td>北京-昆明</td>
											<td>10-15</td>
											<td><span>￥509</span></td>
											<td>￥35</td>
											<td>无</td>
											<td>厦门航空</td>
											<td><button type="button" class="btn btn-default book-table-btn btn-hover">预订</button></td>
										</tr>
										<tr class="quanbu xiamen">
											<td>北京-厦门</td>
											<td>10-15</td>
											<td><span>￥893</span></td>
											<td>￥73</td>
											<td>有</td>
											<td>深圳航空</td>
											<td><button type="button" class="btn btn-default book-table-btn btn-hover">预订</button></td>
										</tr>
										<tr class="quanbu changsha">
											<td>北京-长沙</td>
											<td>10-15</td>
											<td><span>￥663</span></td>
											<td>￥46</td>
											<td>无</td>
											<td>四川航空</td>
											<td><button type="button" class="btn btn-default book-table-btn btn-hover">预订</button></td>
										</tr>
										<tr>
											<td id="gengduo" colspan="7">加载更多航班...</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
						
						
					</div>
					<!--右边公共部分-->
					<div class="col-sm-4 hidden-xs content-recommend">
						<!--景点推荐-->
						<div class="content-recommend-box">
							<div class="row">
								<div class="col-xs-12 recommend-title">
									<h4>景点推荐</h4>
								</div>
							</div>
							
							<div class="row recommend-content1">
								<!--1-->
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>曼谷(12)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>东京(5)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>西双版纳(8)</span>
									</div>
								</div>
								<!--2-->
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>漓江(16)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>呼伦贝尔(4)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>首尔(9)</span>
									</div>
								</div>
								<!--3-->
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>巴厘岛(15)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>土耳其(22)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>夏威夷(5)</span>
									</div>
								</div>
								<!--4-->
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>巴厘岛(11)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>毛里求斯(7)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>吉普岛(4)</span>
									</div>
								</div>
								<!--5-->
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>希腊(18)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>法瑞意(8)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>马尔代夫(9)</span>
									</div>
								</div>
								<!--6-->
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>新西兰(16)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>埃及(11)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>迪拜(14)</span>
									</div>
								</div>
								<!--7-->
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>斯里兰卡(7)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>麦哈顿(3)</span>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="recommend-content1-item imgdark lidark">
										<span>大阪(15)</span>
									</div>
								</div>
								
							</div>
						
						</div>
						
						<!--热卖旅游-->
						<div class="content-recommend-box">
							<div class="row">
								<div class="col-xs-12 recommend-title">
									<h4>热卖旅游</h4>
								</div>
							</div>
							
							<div class="row recommend-content2">
								<div class="col-sm-6 recommend-content2-item">
									<div class="imglight">
										<img class="img-hover" src="img/hot1.jpg"/>
									</div>
									<p class="text-center">曼谷-芭提雅6日游</p>
								</div>
								<div class="col-sm-6 recommend-content2-item">
									<div class="imglight">
										<img class="img-hover" src="img/hot2.jpg"/>
									</div>
									<p class="text-center">马尔代夫双鱼6日游</p>
								</div>
								<div class="col-sm-6 recommend-content2-item">
									<div class="imglight">
										<img class="img-hover" src="img/hot3.jpg"/>
									</div>
									<p class="text-center">海南双飞5日游</p>
								</div>
								<div class="col-sm-6 recommend-content2-item">
									<div class="imglight">
										<img class="img-hover" src="img/hot4.jpg"/>
									</div>
									<p class="text-center">富山大阪东京8日游</p>
								</div>
								<div class="col-sm-6 recommend-content2-item">
									<div class="imglight">
										<img class="img-hover" src="img/hot5.jpg"/>
									</div>
									<p class="text-center">法瑞意德12日游</p>
								</div>
								<div class="col-sm-6 recommend-content2-item">
									<div class="imglight">
										<img class="img-hover" src="img/hot6.jpg"/>
									</div>
									<p class="text-center">巴厘岛6日半游</p>
								</div>
								<div class="col-sm-6 recommend-content2-item">
									<div class="imglight">
										<img class="img-hover" src="img/hot7.jpg"/>
									</div>
									<p class="text-center">塞舌尔迪拜9日游</p>
								</div>
								<div class="col-sm-6 recommend-content2-item">
									<div class="imglight">
										<img class="img-hover" src="img/hot8.jpg"/>
									</div>
									<p class="text-center">花样土耳其10日游</p>
								</div>
							</div>
							
						</div>
						
						<!--旅游百宝箱-->
						<div class="content-recommend-box">
							<div class="row">
								<div class="col-xs-12 recommend-title">
									<h4>旅游百宝箱</h4>
								</div>
							</div>
							
							<div class="row recommend-content3">
								<div class="col-sm-6">
									<div class="recommend-content1-item recommend-content3-item imgdark lidark">
										<img class="img-responsive" src="img/trea1.png"/>
										<span>天气预报</span>
									</div>
								</div>
								<div class="col-sm-6">
									<div class="recommend-content1-item recommend-content3-item imgdark lidark">
										<img class="img-responsive" src="img/trea2.png"/>
										<span>火车票查询</span>
									</div>
								</div>
								<div class="col-sm-6">
									<div class="recommend-content1-item recommend-content3-item imgdark lidark">
										<img class="img-responsive" src="img/trea3.png"/>
										<span>航空查询</span>
									</div>
								</div>
								<div class="col-sm-6">
									<div class="recommend-content1-item recommend-content3-item imgdark lidark">
										<img class="img-responsive" src="img/trea2.png"/>
										<span>地铁线路查询</span>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</section>
		
		<!--页脚-->
		<section class="footer">
			<div class="container-fluid">
				<div class="row footer-nav">
					<div class="col-sm-4 hidden-xs">
						<h3>合作伙伴</h3>
						<ul>
							<li><a href="#">途牛旅游网</a></li>
							<li><a href="#">驴妈妈旅游网</a></li>
							<li><a href="#">携程旅游</a></li>
							<li><a href="#">中国青年旅行社</a></li>
						</ul>
					</div>
					<div class="col-sm-4 hidden-xs">
						<h3>旅游FAQ</h3>
						<ul>
							<li><a href="#">旅游合同签订方式？</a></li>
							<li><a href="#">儿童价是基于什么制定的？</a></li>
							<li><a href="#">旅游的线路品质怎么界定的？</a></li>
							<li><a href="#">单房差是什么？</a></li>
							<li><a href="#">旅游保险有哪些种类？</a></li>
						</ul>
					</div>
					<div class="col-sm-4 hidden-xs">
						<h3>联系方式</h3>
						<ul>
							<li><a href="#">微博：weibo.com/ycku</a></li>
							<li><a href="#">邮件：ycku@ycku.com</a></li>
							<li><a href="#">地址：江苏盐城无名路123号</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="container-fluid">
				<p class="text-center overflow2">Copyright&copy;YCKU 瓢城旅行社|苏ICP备120110119号|旅行社经营许可证：L-YC-BK12345</p>
			</div>
		</section>
		
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
